<template>
	<view class="my_container">
		<CustomNavbarTwo :title="pageTitle" />
		<view class="my_container_body">
			<view class="my_container_body_head"></view>
			<view class="my_container_body_body">
				<view class="head-wrap">
					<view class="background-view-image">
						<u-swiper
							@click="handleDetail"
							keyName="content"
							imgMode="scaleToFill"
							height="240rpx"
							:list="bannerList"
							indicator
							indicatorMode="line"
							circular
							radius="24rpx"
						></u-swiper>
					</view>
					<!-- 					<image v-if="type == '废纸'" class="head_image"
						src="https://market-fenjie-1331975401.cos.ap-nanjing.myqcloud.com/2025/03/01/6b71cabe3ab64a489378284a905f6079.png">
					</image>
					<image v-if="type == '废塑料品种'" class="head_image"
						src="https://market-fenjie-1331975401.cos.ap-nanjing.myqcloud.com/2025/03/01/9889bf160f074ba5b23bc3f9d6379911.png">
					</image>
					<image v-if="type == '设备'" class="head_image"
						src="https://market-fenjie-1331975401.cos.ap-nanjing.myqcloud.com/2025/03/01/1b9749b5781641bfb24ee2b0e656473c.png">
					</image> -->
					<view class="search-container">
						<!-- 搜索区域容器 -->
						<view class="search-wrapper">
							<!-- 搜索输入框 -->
							<view class="search-input">
								<uni-icons type="search" size="18" color="#C0C4CC"></uni-icons>
								<input @input="onInput" type="text" class="input-core" placeholder="搜你想找的" placeholder-class="placeholder-style" :value="keyword" />
							</view>
							<!-- AI搜索按钮 -->
							<view class="ai-search" @click="handleAISearch">
								<text class="ai-text">AI搜索</text>
								<uni-icons type="flash" size="16" color="#67C23A"></uni-icons>
							</view>
						</view>
					</view>
					<view class="head">
						<view @tap="showProp" class="item">
							<view class="left">{{ type }}选择</view>
							<image src="../../static/imags/xia.png" class="right"></image>
						</view>
						<view @tap="showu" class="item">
							<view class="left">{{ resourceTypeStr == '' ? '供求选择' : resourceTypeStr }}</view>
							<image src="../../static/imags/xia.png" class="right"></image>
						</view>
						<view @tap="showf" class="item">
							<view class="left">
								{{ province == '' ? '地区选择' : province }}
								{{ city == '' ? '' : '-' + city }}
							</view>
							<image src="../../static/imags/xia.png" class="right"></image>
						</view>
					</view>
				</view>
				<view style="height: 4rpx"></view>
				<view class="wrapper">
					<view v-for="(item, index) in itemList" :key="index">
						<view v-show="index == 2">
							<image @tap="handleDetail1(v)" v-for="v in bannerList1" :key="v" style="margin-top: 28rpx; width: 686rpx; height: 184rpx" :src="v.content"></image>
						</view>
						<view class="show-items-item" @tap="goDetail(item)">
							<view class="show-items-item-left">
								<image class="show-items-item-image" mode="aspectFill" :src="item.picUrl"></image>
								<view class="show-items-item-image-bontton">
									<image src="../../static/images/time.png"></image>
									<view>{{ item.createTime.substring(0, 10).replace('-', '.').replace('-', '.') }}</view>
								</view>
							</view>
							<view class="show-items-item-right">
								<view class="show-items-item-right-one">
									<view :class="[item.resourceType == '1' ? 'active' : '']">
										{{ item.resourceType == '1' ? '出售' : '采购' }}
									</view>
									<view style="font-weight: 600">{{ item.title }}</view>
								</view>
								<view class="show-items-item-right-two">
									{{ item.pubContent }}
								</view>
								<view class="show-items-item-right-four">
									<image src="../../static/images/location.png"></image>
									<view>{{ showLocation(item.province, item.city) }}</view>
									<view>￥{{ item.price ? item.price : '电议' }}</view>
								</view>
								<view class="show-items-item-right-five">
									<image :src="item.briefUserInfo.avatar"></image>
									<view>{{ item.briefUserInfo.nickName }}</view>
									<view style="color: #333">{{ item.briefUserInfo.vipTypeName }}</view>
								</view>
								<view class="show-items-item-right-six">
									<view class="one b-btn">
										<image mode="widthFix" class="b-img" src="../../static/images/view.png"></image>
										<view class="b-count">
											{{ item.viewCount == null ? 0 : item.viewCount }}
										</view>
									</view>
									<view @tap.stop="handleCollect(item, index)" class="two b-btn">
										<image v-if="item.collectFlag == '0'" class="b-img" src="../../static/images/collect.png"></image>
										<image v-else class="b-img" src="../../static/images/like1.png" />
										<view class="b-count">
											{{ item.collectCount == null ? 0 : item.collectCount }}
										</view>
									</view>
									<view class="three b-btn">
										<image class="b-img" src="../../static/images/message.png"></image>
										<view class="b-count">
											{{ item.commentCount == null ? 0 : item.commentCount }}
										</view>
									</view>
									<view class="four b-btn">
										<image class="b-img" src="../../static/images/zhaunfa.png"></image>
										<button class="share-btn" open-type="share" @tap.stop="handShareCountAdd(item, index)">
											分享
											{{ item.shareCount == null ? 0 : item.shareCount }}
										</button>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-show="show" style="height: 70rpx; line-height: 70rpx; width: 100%">
					<u-loadmore icon :status="status" />
				</view>
			</view>
		</view>
		<!-- 筛选条件部分 -->
		<view v-if="showPopup" class="content">
			<view class="head_der">
				<!-- 左侧分类列表 -->
				<view class="left-menu">
					{{ type }}
				</view>
				<!-- 右侧标签组 -->
				<scroll-view class="right-content" scroll-y>
					<view class="tag-group" v-for="(group, groupIndex) in groups" :key="groupIndex">
						<!-- 组标题 -->
						<view class="group-header" @click="toggleGroup(groupIndex)">
							<view class="group-title">{{ group.name }}</view>
							<image :src="group.expanded ? '../../static/imags/shang.png' : '../../static/imags/xia.png'" class="toggle-icon"></image>
						</view>
						<!-- 标签列表 -->
						<view class="tag-list" v-if="group.expanded">
							<view class="tag" v-for="(tag, tagIndex) in group.tags" :key="tagIndex" :class="{ active: tag.selected }" @click="toggleTag(groupIndex, tagIndex)">
								{{ tag.name }}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="footer">
				<view class="btn cancel" @click="closePopup">取消</view>
				<view class="btn reset" @click="resetFilters">重置</view>
				<view class="btn confirm" @click="confirmSelection">确定</view>
			</view>
		</view>
		<u-picker :show="show2" ref="uPicker2" :columns="columns2" @confirm="confirm2" @cancel="cancel2"></u-picker>
		<u-picker :show="show3" :loading="loading" ref="uPicker3" :columns="columns3" @confirm="confirm3" @cancel="cancel3" @change="changeHandler"></u-picker>
	</view>
</template>
<script>
import CustomNavbarTwo from '@/components/CustomNavbarTwo.vue';
import locationFormatter from '@/util/locationFormatter';
import { mapState } from 'vuex'; // 关键导入
const api = require('../../util/api.js');
export default {
	components: { CustomNavbarTwo },
	data() {
		return {
			keyword: '',
			status: 'loading',
			show: true,
			// A  废纸  B 塑料  C 废塑
			type: '',
			pageTitle: '',
			pageSize: 5,
			pageNum: 1,
			total: 0,
			product3: '',
			product2: '',
			resourceType: '',
			resourceTypeStr: '',
			province: '',
			city: '',
			itemList: [],
			diquxuanze: '地址选择',
			showPopup: false,
			groupIndex: null,
			tagIndex: null,
			groups: [],
			show2: false,
			columns2: [['供求选择', '出售', '采购']],
			show3: false,
			loading: false,
			columnData: [],
			columns3: [],
			bannerList: [],
			bannerList1: [],
			shareTile: '',
			shareId: '',
			isBtn: false
		};
	},
	onLoad(e) {
		if (e && e.type) {
			this.type = e.type;
			this.pageTitle = this.type + '资源';
		}
		this.getData();
		this.getAddress();
		this.getBannerList();
		this.productTypeList();
		wx.showShareMenu({
			withShareTicket: true,
			//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
			menus: ['shareAppMessage', 'shareTimeline']
		});
	},
	onPullDownRefresh() {
		// 下拉刷新的处理逻辑
		this.pageNum = 1;
		this.status = 'loading';
		this.itemList = [];
		this.getData();
	},
	onReachBottom() {
		if (this.total == this.itemList.length) {
			this.status = 'nomore';
			this.show = true;
			return;
		}
		this.show = true;
		this.pageNum++;
		this.getData();
	},
	onShareAppMessage(res) {
		if (res.from === 'button') {
			// 来自页面内分享按钮
			console.log(res.target);
		}
		return {
			title: this.isBtn ? this.shareTile : this.pageTitle, //分享的名称
			path: this.isBtn ? `/page/detail/index?id=${this.shareId}` : `/page/feizhi/index`,
			mpId: 'wx312947ac8d5e65e9' //此处配置微信小程序的AppId
		};
	},
	//分享到朋友圈
	onShareTimeline(res) {
		return {
			title: this.isBtn ? this.shareTile : this.pageTitle, //分享的名称
			path: this.isBtn ? `/page/detail/index?id=${this.shareId}` : `/page/feizhi/index`,
			mpId: 'wx312947ac8d5e65e9' //此处配置微信小程序的AppId
		};
	},
	computed: {
		...mapState(['userInfo', 'pubInfoUserInfo'])
	},
	methods: {
		showLocation(pro, city) {
			const displayName = locationFormatter.format(pro, city);
			return displayName;
			console.log(displayName); // 输出：浙江杭州
		},
		//点击轮播图
		handleDetail(e) {
			console.log(e, 666);
			if (this.bannerList[e].clickUrl) {
				uni.navigateTo({
					url: `/page/detail/index?id=${this.bannerList[e].clickUrl}`
				});
			}
		},
		handleDetail1(e) {
			console.log(e, 55);
			if (e.clickUrl) {
				uni.navigateTo({
					url: `/page/detail/index?id=${e.clickUrl}`
				});
			}
		},
		//增加分享次数
		handShareCountAdd(item, index) {
			this.isBtn = true;
			this.shareTile = item.title;
			this.shareId = item.id;
			this.$https
				.post(this.$api.getPubShareCountAdd, {
					id: item.id
				})
				.then((res) => {
					if (res.code === 200) {
						this.itemList[index].shareCount = this.itemList[index].shareCount + 1;
						this.isBtn = false;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
						this.isBtn = false;
					}
				});
		},
		//获取轮播图
		getBannerList() {
			this.$https
				.post(this.$api.getBannerList, {
					bannerType: this.type == '废纸' ? '9' : this.type == '设备' ? '12' : '7'
				})
				.then((res) => {
					if (res.code === 200) {
						this.bannerList = res.data;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			this.$https
				.post(this.$api.getBannerList, {
					bannerType: this.type == '废纸' ? '17' : this.type == '设备' ? '19' : '18'
				})
				.then((res) => {
					if (res.code === 200) {
						this.bannerList1 = res.data;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
		},
		onInput(e) {
			this.keyword = e.detail.value;
		},
		//搜索
		handleAISearch() {
			this.pageNum = 1;
			this.getData();
		},
		//点赞
		handleCollect(item, index) {
			if (!this.userInfo.userId) {
				return uni.navigateTo({
					url: '/pages/index/index'
				});
			}
			this.$https
				.post(this.$api.getCourseLike, {
					pubInfoId: item.id,
					operateType: 1,
					processType: item.collectFlag == 0 ? 1 : 0
				})
				.then((res) => {
					if (res.code === 200) {
						if (item.collectFlag == 0) {
							this.itemList[index].collectFlag = '1';
							this.itemList[index].collectCount++;
						} else {
							this.itemList[index].collectFlag = '0';
							this.itemList[index].collectCount--;
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
		},
		goDetail(item) {
			uni.navigateTo({
				url: `/page/detail/index?id=${item.id}&title=${item.title}&type=${this.type}`
			});
		},
		productTypeList() {
			var parentId = '';
			switch (this.type) {
				case '废纸':
					parentId = '1';
					break;
				case '设备':
					parentId = '2';
					break;
				case '废塑料品种':
					parentId = '3';
				default:
			}
			const query = {
				parentId: parentId,
				showAll: 1
			};
			this.$https.post(this.$api.productTypeList, query).then((res) => {
				if (res.code === 200) {
					this.groups = res.data;
					this.groups.forEach((group) => {
						group.tags.forEach((tag) => {
							tag.expanded = false;
						});
					});
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			});
		},
		getAddress() {
			this.$https.post(this.$api.getAddress, { showAll: 1 }).then((res) => {
				if (res.code === 200) {
					const data = res.data;
					this.columns3 = res.data.parent;
					this.columnData = res.data.child;
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					this.show = false;
				}
			});
		},
		reset() {
			this.pageNum = 1;
			this.getData();
		},
		getData() {
			uni.showLoading({
				title: '加载中'
			});
			const query = {
				pageSize: this.pageSize,
				pageNum: this.pageNum,
				product3: this.product3,
				product2: this.product2,
				resourceType: this.resourceType,
				province: this.province,
				city: this.city,
				product1: this.type == '废塑料品种' ? '废塑料' : this.type,
				keyWord: this.keyword,
				checkStatus: 2
			};
			this.$https.get(this.$api.pubInfoPage, query).then((res) => {
				if (res.code === 200) {
					if (this.pageNum == 1) {
						this.itemList = [];
					}
					const data = res.data;
					this.total = res.total;
					this.itemList = [...this.itemList, ...res.rows];
					if (this.total == 0) {
						this.status = 'nomore';
						this.show = true;
					} else {
						this.show = false;
					}
					uni.hideLoading();
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					this.show = false;
				}
			});
		},
		// 切换组的展开状态
		toggleGroup(groupIndex) {
			this.groups[groupIndex].expanded = !this.groups[groupIndex].expanded;
		},
		// 切换标签的选中状态
		toggleTag(groupIndex, tagIndex) {
			// 遍历所有组和标签，将 selected 设置为 false
			this.groups.forEach((group) => {
				group.tags.forEach((tag) => {
					tag.selected = false;
				});
			});
			this.product2 = this.groups[groupIndex].name;
			this.groups[groupIndex].tags[tagIndex].selected = !this.groups[groupIndex].tags[tagIndex].selected;
			this.groupIndex = groupIndex;
			this.tagIndex = tagIndex;
		},
		resetFilters() {
			this.groups.forEach((group) => {
				group.tags.forEach((tag) => {
					tag.selected = false;
				});
			});
			this.product2 = '';
			this.product3 = '';
		},
		showProp() {
			console.log(555);
			this.showPopup = true;
		},
		closePopup() {
			this.showPopup = false;
		},
		confirmSelection() {
			const group = this.groups[this.groupIndex];
			const tag = group.tags[this.tagIndex];
			if (tag.selected) {
				this.product3 = tag.name;
			} else {
				this.product3 = '';
			}
			this.closePopup();
			this.reset();
		},
		showu() {
			if (this.showPopup) {
				return;
			}
			this.show2 = true;
		},
		// 回调参数为包含columnIndex、value、values
		confirm2(e) {
			console.log(e);
			this.resourceType = e.indexs[0] == 0 ? '' : e.indexs[0];
			this.resourceTypeStr = e.value[0];
			this.show2 = false;
			this.pageNum = 1;
			this.getData();
		},
		cancel2() {
			this.show2 = false;
		},
		changeHandler(e) {
			const {
				columnIndex,
				index,
				// 微信小程序无法将picker实例传出来，只能通过ref操作
				picker = this.$refs.uPicker3
			} = e;
			const name = e.value[0];
			if (columnIndex === 0) {
				this.loading = true;
				// 模拟网络请求
				uni.$u.sleep(500).then(() => {
					picker.setColumnValues(1, this.columnData[index]);
					this.loading = false;
				});
			}
		},
		showf() {
			if (this.showPopup) {
				return;
			}
			this.show3 = true;
		},
		confirm3(e) {
			const p = e.value[0];
			const c = e.value[1];
			if ('全部' == p) {
				this.province = '';
				this.city = '';
			} else {
				this.province = p;
				this.city = c;
			}
			this.show3 = false;
			this.pageNum = 1;
			this.getData();
		},
		cancel3() {
			this.show3 = false;
		}
	}
};
</script>
<style lang="scss" scoped>
.share-btn {
	font-size: 20rpx;
	width: 100rpx;
	line-height: 37rpx;
}

.my_container {
	width: 100%;

	.my_container_body {
		width: 750rpx;
		min-height: 1624rpx;
		background: linear-gradient(180deg, #ddffde 0%, #f7f7f7 29%, #f7f7f7 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;

		.my_container_body_head {
			width: 686rpx;
			height: 176rpx;
		}

		.my_container_body_body {
			width: 686rpx;
			margin-left: 32rpx;

			.head-wrap {
				z-index: 9999;
				position: fixed;
				width: 686rpx;
				background-color: #ddffde;

				/* 主容器 */
				.search-container {
					padding-top: 20rpx;
					// background: linear-gradient(180deg, #ddffde 0%, #f7f7f7 29%, #f7f7f7 100%); // 匹配原图淡绿背景
					background-color: #ddffde;
				}

				/* 搜索包装层 */
				.search-wrapper {
					display: flex;
					align-items: center;
					height: 80rpx;
					background: #ffffff;
					border-radius: 48rpx;
					box-shadow: 0 4rpx 12rpx rgba(103, 194, 58, 0.1);
				}

				/* 搜索输入区域 */
				.search-input {
					flex: 1;
					display: flex;
					align-items: center;
					padding: 0 24rpx;

					.input-core {
						flex: 1;
						height: 100%;
						margin-left: 16rpx;
						font-size: 28rpx;
						color: #333;
					}

					.placeholder-style {
						color: #c0c4cc;
						font-size: 26rpx;
					}
				}

				/* AI搜索按钮 */
				.ai-search {
					display: flex;
					align-items: center;
					padding: 0 32rpx;
					height: 100%;
					background: linear-gradient(135deg, #f0f9eb 0%, #e1f3d8 100%);
					border-radius: 0 48rpx 48rpx 0;

					.ai-text {
						color: #67c23a;
						font-size: 28rpx;
						margin-right: 12rpx;
						font-weight: 500;
					}
				}

				/* 图标微调 */
				uni-icons[type='flash'] {
					margin-top: 2rpx;
				}
			}

			.background-view-image {
				width: 686rpx;
				height: 240rpx;
				margin-top: 20rpx;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
			}

			.head {
				height: 80rpx;
				width: 686rpx;
				display: flex;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;

				.item {
					height: 100%;
					display: flex;
					align-items: center;
					width: 228rpx;

					&:nth-child(1) {
						width: 240rpx;
					}

					.left {
						height: 40rpx;
						width: auto;
						/* 允许内容扩展 */
					}

					.right {
						width: 28rpx;
						height: 28rpx;
						margin-top: 6rpx;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
						margin-left: 6rpx;
					}
				}

				:nth-child(1) {
					justify-content: flex-start;
					/* 默认靠左对齐 */
				}

				:nth-child(2) {
					justify-content: center;
					/* 默认居中 */
				}

				:nth-child(3) {
					justify-content: flex-end;
					/* 默认靠右对齐 */
				}
			}

			.wrapper {
				margin-top: 440rpx;
			}

			.show-items-item {
				width: 686rpx;
				height: 322rpx;
				background: #ffffff;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				margin-top: 20rpx;
				display: flex;

				.show-items-item-left {
					.show-items-item-image {
						width: 212rpx;
						height: 224rpx;
						margin-top: 28rpx;
						margin-left: 20rpx;
						border-radius: 24rpx;
					}

					.show-items-item-image-bontton {
						height: 70rpx;
						width: 212rpx;
						margin-left: 20rpx;
						display: flex;
						margin-top: 20rpx;

						image {
							width: 36rpx;
							height: 36rpx;
						}

						view {
							width: 128rpx;
							height: 36rpx;
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 24rpx;
							color: #777777;
							line-height: 36rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
							margin-left: 4rpx;
						}
					}
				}

				.show-items-item-right {
					margin-left: 20rpx;
					height: 322rpx;

					.show-items-item-right-one {
						display: flex;
						align-items: center;

						:nth-child(1) {
							width: 72rpx;
							height: 40rpx;
							line-height: 40rpx;
							background-color: #556983;
							border-radius: 10rpx;
							margin-top: 38rpx;
							margin-right: 10rpx;
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 18rpx;
							color: #fff;
							text-align: center;
							font-style: normal;
							text-transform: none;
						}

						.active {
							width: 72rpx;
							height: 40rpx;
							line-height: 40rpx;
							background-color: #4fe200;
							border-radius: 10rpx;
							margin-top: 38rpx;
							margin-right: 10rpx;
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 18rpx;
							color: #fff;
							text-align: center;
							font-style: normal;
							text-transform: none;
						}

						:nth-child(2) {
							margin-top: 38rpx;
							width: 340rpx;
							height: 40rpx;
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 500;
							font-size: 28rpx;
							color: #333333;
							line-height: 39rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
							overflow: hidden;
							/* 确保超出部分的文本会被隐藏 */
							text-overflow: ellipsis;
							/* 超出部分显示省略号 */
							display: -webkit-box;
							/* 使用弹性盒子模型 */
							-webkit-line-clamp: 2;
							/* 限制显示两行 */
							-webkit-box-orient: vertical;
							/* 垂直排列子元素 */
						}
					}

					.show-items-item-right-two {
						width: 414rpx;
						height: 68rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 28rpx;
						color: #333;
						line-height: 34rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						margin-top: 10rpx;
						overflow: hidden;
						/* 确保超出部分的文本会被隐藏 */
						text-overflow: ellipsis;
						/* 超出部分显示省略号 */
						display: -webkit-box;
						/* 使用弹性盒子模型 */
						-webkit-line-clamp: 2;
						/* 限制显示两行 */
						-webkit-box-orient: vertical;
						/* 垂直排列子元素 */
					}

					.show-items-item-right-four {
						display: flex;
						width: 414rpx;
						height: 44rpx;

						image {
							width: 24rpx;
							height: 26rpx;
							border-radius: 0rpx 0rpx 0rpx 0rpx;
							margin-top: 9rpx;
						}

						:nth-child(2) {
							flex: 1;
							height: 44rpx;
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 24rpx;
							color: #333;
							line-height: 44rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
							padding-left: 4rpx;
						}

						:nth-child(3) {
							width: 180rpx;
							height: 44rpx;
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 600;
							font-size: 24rpx;
							color: #ff4400;
							line-height: 44rpx;
							text-align: right;
							font-style: normal;
							text-transform: none;
						}
					}

					.show-items-item-right-five {
						display: flex;
						width: 414rpx;
						height: 44rpx;

						image {
							width: 40rpx;
							height: 40rpx;
							margin-top: 2rpx;
							border-radius: 24rpx 24rpx 24rpx 24rpx;
							border: 1rpx solid #e4e8ef;
						}

						:nth-child(2) {
							width: 220rpx;
							line-height: 44rpx;
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 24rpx;
							color: #777777;
							line-height: 44rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
							padding-left: 10rpx;
						}

						:nth-child(3) {
							width: 154rpx;
							line-height: 44rpx;
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 20rpx;
							color: #ff4400;
							line-height: 44rpx;
							text-align: right;
							font-style: normal;
							text-transform: none;
						}
					}

					.show-items-item-right-six {
						padding-left: 10rpx;
						height: 40rpx;
						width: 414rpx;
						display: flex;
						justify-content: space-between;
						margin-top: 30rpx;
						line-height: 40rpx;

						.b-btn {
							display: flex;

							.b-img {
								width: 40rpx;
								height: 40rpx;
							}

							.b-count {
								margin-left: 4rpx;
								font-size: 24rpx;
							}
						}

						.four {
							width: 130rpx;
							position: relative;

							.b-img {
								width: 36rpx;
								height: 36rpx;
							}

							.share-btn {
								width: 120rpx;
								background-color: transparent;
								padding-left: 36rpx;
								position: absolute;
								font-size: 22rpx;
								line-height: 37rpx;
								top: 0;
							}
						}
					}
				}
			}
		}
	}

	// 变量定义
	.content {
		position: fixed;
		/* 固定位置 */
		top: 606rpx;
		/* 从屏幕底部开始 */
		left: 0;
		/* 水平从左侧开始 */
		width: 100%;
		/* 占满屏幕宽度 */
		// height: 810rpx;
		height: calc(100vh - 440rpx);
		/* 内容高度 */
		background: #ffffff;
		flex-direction: column;
		z-index: 9999;
		/* 确保覆盖内容部分 */
		background: #ffffff;

		.head_der {
			width: 100%;
			display: flex;

			// 左侧分类列表
			.left-menu {
				width: 178rpx;
				height: 676rpx;
				background: #f6f6f6;
				border-radius: 0rpx 24rpx 24rpx 0rpx;
				text-align: center;
				line-height: 676rpx;
			}

			// 右侧标签组
			.right-content {
				flex: 1;
				width: 512rpx;
				height: 676rpx;
				overflow-y: scroll;
				margin-left: 30rpx;

				.tag-group {
					width: 512rpx;
					margin-bottom: 20rpx;

					.group-header {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 10rpx 0;
						font-size: 28rpx;
						color: #333;
						border-bottom: 1px solid #ddd;

						.group-title {
							flex: 1;
							font-weight: 550;
						}

						.toggle-icon {
							width: 28rpx;
							height: 28rpx;
						}
					}

					.tag-list {
						display: flex;
						flex-wrap: wrap;
						gap: 10rpx;
						margin-top: 10rpx;

						.tag {
							padding: 10rpx 20rpx;
							font-size: 24rpx;
							background-color: #f4f4f4;
							border-radius: 20rpx;
							color: #333;
							cursor: pointer;

							&.active {
								background-color: #1ee825;
								color: #fff;
							}
						}
					}
				}
			}
		}

		// 底部操作栏
		.footer {
			display: flex;
			width: 750rpx;
			height: 134rpx;

			.btn {
				width: 207rpx;
				height: 76rpx;
				background: #ffffff;
				border-radius: 84rpx 84rpx 84rpx 84rpx;
				border: 2rpx solid #dadada;
				font-weight: 400;
				font-size: 28rpx;
				color: #777777;
				margin-left: 32rpx;
				text-align: center;
				line-height: 76rpx;
				margin-top: 32rpx;

				&.confirm {
					color: #ffffff;
					background: #1ee825;
				}
			}
		}
	}
}
</style>
